<template>
  <div class="product-card" @click="goToDetail">
    <div class="product-image">
      <img :src="product.image" :alt="product.name"/>
      <div class="product-tags" v-if="product.tags && product.tags.length">
        <span
            v-for="tag in product.tags.slice(0, 2)"
            :key="tag"
            class="product-tag"
        >
          {{ tag }}
        </span>
      </div>
    </div>

    <div class="product-info">
      <h3 class="product-name" :title="product.name">{{ product.name }}</h3>
      <div class="product-price">
        <span class="current-price"><Currency/>{{ product.price }}</span>
        <span
            v-if="product.originalPrice && product.originalPrice > product.price"
            class="original-price"
        >
          <Currency/>{{ product.originalPrice }}
        </span>
      </div>

      <div class="product-meta">
        <div class="product-rating">
          <el-rate
              :model-value="product.rating / 2"
              disabled
              size="small"
              show-score
              text-color="#ff9900"
              :score-template="`${product.rating}`"
          />
          <span class="review-count">({{ product.reviewCount }})</span>
        </div>
        <div class="product-sales">已售{{ product.sales }}件</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router'
import Currency from "@/components/common/Currency.vue";

interface Product {
  id: number
  name: string
  price: number
  originalPrice?: number
  image: string
  description: string
  rating: number
  reviewCount: number
  sales: number
  tags?: string[]
}

const props = defineProps<{
  product: Product
}>()

const router = useRouter()

const goToDetail = () => {
  router.push(`/product/${props.product.id}`)
}

</script>

<style scoped>
.product-card {
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--transition-all);
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-secondary);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-strong);
  border-color: var(--primary-color);
}

.product-image {
  position: relative;
  padding-bottom: 100%;
  overflow: hidden;
}

.product-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.08);
}


.product-card:hover .product-overlay {
  opacity: 1;
}

.product-tags {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  z-index: 2;
}

.product-tag {
  background: var(--gradient-primary);
  color: var(--text-light);
  font-size: 10px;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-rounded);
  line-height: 1.2;
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-soft);
}

.product-info {
  padding: var(--spacing-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--gradient-bg-primary);
}

.product-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 2.8em;
}

.product-price {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
}

.current-price {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--primary-color);
}

.original-price {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  text-decoration: line-through;
}

.product-meta {
  margin-top: auto;
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-secondary);
}

.product-rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.review-count {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.product-sales {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .product-info {
    padding: var(--spacing-md);
  }

  .product-name {
    font-size: var(--font-size-sm);
  }

  .current-price {
    font-size: var(--font-size-lg);
  }

  .product-overlay {
    opacity: 1;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    left: auto;
    transform: none;
  }
}
</style>
